<template>
	<div>
		<h1>3D page <button @click="dj">点击</button></h1>
		<div ref="canvas" style="width: 100%; height: 100vh;">

		</div>


	</div>
</template>
<script setup>
// import {ref,reactive} from "vue"
useHead({
	title: '3D',
	meta: [{
		name: 'description',
		content: 'My amazing site.'
	}],
	bodyAttrs: {
		class: 'test'
	},
	//   script: [ { children: 'console.log(\'Hello world\')' } ]
})
// 找到要渲染的盒子
let canvas = ref()
console.log(canvas.value, 25)
import * as THREE from 'three';
onBeforeMount(() => {
	console.log(28, canvas.value)
})
onMounted(() => {
	console.log(31, canvas.value)
})
const dj = function () {
	// console.log(canvas)
	// console.log(canvas.value.clientHeight)
	const event = {}
	// 创建一个新的场景对象。
	const scene = new THREE.Scene();
	scene.background = new THREE.Color(0x909399);
	/**
	 * 长/正方体：右、左、上、下、前、后
	 * 椭圆体：侧面、上、下
	 * 球：只有一面
	 */
	// 第一个参数是视野角度（FOV）https://baike.baidu.com/item/%E8%A7%86%E5%9C%BA%E8%A7%92/6513997?fr=ge_ala
	// 第二个参数是长宽比（aspect ratio）。 也就是你用一个物体的宽除以它的高的值。比如说，当你在一个宽屏电视上播放老电影时，可以看到图像仿佛是被压扁的。
	// 接下来的两个参数是近截面（near）和远截面（far）https://blog.csdn.net/qq_45366264/article/details/109964104
	const camera = new THREE.PerspectiveCamera(25, canvas.value.clientWidth / canvas.value.clientHeight, 1, 1000);
	camera.position.set(0, 0, 100);
	// camera.position.set(10, -10, 100);
	// 实例化WebGLRenderer渲染器
	const renderer = new THREE.WebGLRenderer({
		antialias: true
	});
	// 设置渲染器的尺寸
	renderer.setSize(canvas.value.clientWidth, canvas.value.clientHeight);
	// 将内容渲染进去
	canvas.value.appendChild(renderer.domElement);

	// 环境光
	const ambient = new THREE.AmbientLight(0xffffff, 1);
	scene.add(ambient);
	// 我们需要一个BoxGeometry（立方体）对象. 这个对象包含了一个立方体中所有的顶点（vertices）和面（faces）
	// const geometry = new THREE.BoxGeometry(1, 1, 1);
	const geometry = new THREE.BoxGeometry(10, 10, 10); //正方体六面
	// 增加材质 放图片
	// 材质
	const texture = new THREE.TextureLoader();
	const rightTexture = texture.load('/static/shang.jpg', event.onLoad);
	const leftTexture = texture.load('/static/xia.jpg', event.onLoad);
	const topTexture = texture.load('/static/zuo.jpg', event.onLoad);
	const bottomTexture = texture.load('/static/you.jpg', event.onLoad);
	const frontTexture = texture.load('/static/qian.jpg', event.onLoad);
	const backTexture = texture.load('/static/hou.jpg', event.onLoad);
	// console.log(backTexture, 60)
	// 定义材质常量，如果你想单独修改某个材质，请重新创建，否则修改了下面的某一个，其它运用到这个材质的地方也会变噢
	const right_material = new THREE.MeshPhongMaterial({
		// color: 0x00fa9a,
		map: rightTexture
	});
	const left_material = new THREE.MeshPhongMaterial({
		// color: 0x00fa9a,
		map: leftTexture
	});
	const top_material = new THREE.MeshPhongMaterial({
		// color: 0x00fa9a,
		map: topTexture
	});
	const bottom_material = new THREE.MeshPhongMaterial({
		//  color: 0x00fa9a,
		map: bottomTexture
	});
	const front_material = new THREE.MeshPhongMaterial({
		// color: 0x00fa9a,
		map: frontTexture,
		side: THREE.DoubleSide
	});
	// const front_material_color = new THREE.MeshPhongMaterial({
	//     color: 0x00ff00,
	//     map: frontTexture,
	//     side: THREE.DoubleSide
	// });
	const back_material = new THREE.MeshPhongMaterial({
		color: 0x00ff00,
		map: backTexture
	});

	// 正方体
	const mesh_box = new THREE.Mesh(geometry, [right_material, left_material, top_material, bottom_material,
		front_material, back_material
	]);
	// 我们需要给它一个材质，来让它有颜色0x00ff00绿色
	// const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
	// 第三步，我们需要一个Mesh（网格）
	// const cube = new THREE.Mesh(geometry, material);
	mesh_box.position.set(0, 0, 0);
	// 当我们调用scene.add()的时候，物体将会被添加到(0,0,0)坐标
	// scene.add(cube);
	scene.add(mesh_box);
	// camera.position.z = 5;
	// renderer.render(scene, camera);
	// 我们需要使用一个被叫做“渲染循环”（render loop）或者“动画循环”（animate loop）
	let flagKey = 0
	let flagTemp = 0
	let yNum = 0
	function animate() {
		requestAnimationFrame(animate);
		// cube.rotation.x += 0.01;
		// mesh_box.rotation.z += 1.01;
		// mesh_box.rotation.x += 1;
	

		

		
		if(Math.floor(mesh_box.position.x)===30){
			flagKey=0
		}
		// if(Math.floor(mesh_box.position.x)===0){
		// 	flagKey=1
		// }
		if(Math.floor(mesh_box.position.x)===-30){
			flagKey=2
		}
		console.log(Math.floor(mesh_box.position.x),flagKey,130)

		if(flagKey===0){
			mesh_box.position.x-=0.5
			mesh_box.position.z = 30-Math.abs(Math.floor(mesh_box.position.x))
			// mesh_box.position.y = Math.floor(mesh_box.position.x)
		}

		if(flagKey===2){
			mesh_box.position.x+=0.5
			mesh_box.position.z = Math.abs(Math.floor(mesh_box.position.x))-30
			// mesh_box.position.y = Math.floor(mesh_box.position.x)
		}
		
		// if(flagKey){
			
		// }else{
		// 	mesh_box.position.x-=0.2
		// 	// mesh_box.position.y -= 0.02;
		// 	mesh_box.position.z+=0.3
		// }
		// mesh_box.position.y += 0.01;
		// console.log()
		mesh_box.rotation.y += 0.1;


		// 渲染画布
		renderer.render(scene, camera);
	}

	animate();
	// 设置加载管理器
	event.onLoad = () => {
		renderer.render(scene, camera);
	}

}

//
// console.log(window,canvas)
</script>